import React, { Component } from "react";
import "antd/dist/antd.css";
import store from "./store";
// import {
//   CHANGE_INPUT_VALUE,
//   ADD_TODO_ITEM,
//   DELETE_TODO_ITEM,
// } from "./store/actiontypes";
import {
  getInputChangeAction,
  getAddTodoItemAction,
  deleteTodoItemAction,
  // initListAction,
  // getTodoList,
  getInitList,
} from "./store/actionCreators";
import TodoListUI from "./TodoListUI";
// import axios from "axios";

class TodoList extends Component {
  constructor(props) {
    super(props);
    this.state = store.getState();
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleStoreChange = this.handleStoreChange.bind(this);
    this.handeleBtnClick = this.handeleBtnClick.bind(this);
    this.handleDeleteClick = this.handleDeleteClick.bind(this);
    store.subscribe(this.handleStoreChange); // subscribe 监听修改情况
  }
  render() {
    return (
      <TodoListUI
        inputValue={this.state.inputValue}
        list={this.state.list}
        handleInputChange={this.handleInputChange}
        handeleBtnClick={this.handeleBtnClick}
        handleDeleteClick={this.handleDeleteClick}
      />
    );
  }

  componentDidMount() {
    const action = getInitList();
    store.dispatch(action);
    // axios.get("/list.json").then((res) => {
    //   const data = res.data;
    //   const action = initListAction(data);
    //   store.dispatch(action);
    // });
    // redux-thunk 中间件
    // const action = getTodoList();
    // store.dispatch(action);
  }

  handleInputChange(e) {
    // const action = {
    //   type: CHANGE_INPUT_VALUE, //内容
    //   value: e.target.value,
    // };
    const action = getInputChangeAction(e.target.value);
    store.dispatch(action);
  }
  handleStoreChange() {
    //store发生改变后 触发函数
    this.setState(store.getState());
  }

  handeleBtnClick() {
    // const action = {
    //   type: ADD_TODO_ITEM,
    // };
    const action = getAddTodoItemAction();
    store.dispatch(action);
  }

  handleDeleteClick(index) {
    // const action = {
    //   type: DELETE_TODO_ITEM,
    //   value: index,
    // };
    const action = deleteTodoItemAction(index);
    store.dispatch(action);
  }
}

export default TodoList;
